{% extends "aside/erp/base.html" %}
{% load staticfiles %}
{% block custom_tdk %}
    <title>商品管理 - WanFeng</title>
    <meta name="description" content="产品管理">
{% endblock %}

{% block page-title %}商品管理{% endblock %}

{% block app-footer %}
    <div class="app-footer white bg p-a b-t">


    <div class="pull-right text-sm text-muted"></div>
    <span class="text-sm text-muted">WanFeng &copy; Copyright. Version 4.0.1</span>
</div>
{% endblock %}

{% block app-body %}


<input type="hidden" id="UserID" name="UserID" value="{{ request.user.id }}"/>

<script>
    var addTimer = function () {
        var list = [],
                interval;

        return function (id, dateStr) {
            if (!interval)
                interval = setInterval(go, 1000);


            dateStr = dateStr.replace(/-/g,"/");

            var endDate = new Date(dateStr);
            var now = new Date();

            var leftTime = (endDate.getTime()-now.getTime())/1000;

            list.push({ ele: document.getElementById(id), time: leftTime });
        }

        function go() {
            for (var i = 0; i < list.length; i++) {
                list[i].ele.innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0);
                if (!list[i].time)
                    list.splice(i--, 1);
            }
        }

        function getTimerString(time) {
            d = Math.floor(time / 86400),
                    h = Math.floor((time % 86400) / 3600),
                    m = Math.floor(((time % 86400) % 3600) / 60),
                    s = Math.floor(((time % 86400) % 3600) % 60);
            if (time>0)
                if (d>0)
                    return d + "天" + h + "小时" + m + "分";
                else
                    return h + "小时" + m + "分" + s + "秒";

            else return "已到期";
        }
    } ();
</script>


<div class="padding">
<div class="box">

<div class="row p-a">
    <div class="col-sm-12">
        <span class="label m-r-1 {% ifequal status 'onSelling' %}danger text-white{% else %}white text-dark{% endifequal %}"><a href="?status=onSelling">正在销售(361)</a></span>
        <span class="label m-r-1 {% ifequal status 'offline' %}danger text-white{% else %}white text-dark{% endifequal %} "><a href="?status=offline">已下架(23)</a></span>
        <span class="label m-r-1 white text-dark"><a href="#">审核中(0)</a></span>
        <span class="label m-r-1 white text-dark"><a href="#">审核不通过(0)</a></span>
    </div>
</div>

<div class="row p-a" id="filterBox" style="display: none;">

    <!--
    <div class="col-sm-12 m-t-0">
        店铺账号：
        <span class="label orange m-r-1"><a href="#">全部</a></span>
        <span class="label m-r-1 white text-dark"><a href="#">happydeal store</a></span>
        <span class="label m-r-1 white text-dark"><a href="#">hai sen store</a></span>
    </div>
    <div class="col-sm-12 m-t-1">
        负责人：
        <span class="label orange m-r-1"><a href="#">全部</a></span>
        <span class="label m-r-1 white text-dark"><a href="#">xiangfang zeng</a></span>
        <span class="label m-r-1 white text-dark"><a href="#">diw zhang</a></span>
    </div>
    -->

</div>


<div class="row p-a">
    <form name="searchFrom" action="" id="searchFrom">
    <div class="col-sm-6">
        <select class="custom-select w-sx inline v-middle" name="goodsType">
            <option value="0" selected disabled>产品类型</option>
            <option value="1">全部产品</option>
            <option value="2">淘代销产品</option>
            <option value="3">普通产品</option>
        </select>
        <select class="custom-select w-sx inline v-middle" name="goodsGroup">
            <option value="0" selected disabled>产品分组</option>
            <option value="1">全部分组</option>
            <option value="2">其他</option>
            <optgroup label="Pacific Time Zone">
                <option value="CA">California</option>
                <option value="NV">Nevada</option>
                <option value="OR">Oregon</option>
                <option value="WA">Washington</option>
            </optgroup>
            <optgroup label="Mountain Time Zone">
                <option value="AZ">Arizona</option>
                <option value="CO">Colorado</option>
                <option value="ID">Idaho</option>
                <option value="MT">Montana</option>

            </optgroup>
            <optgroup label="Central Time Zone">
                <option value="AL">Alabama</option>
                <option value="AR">Arkansas</option>
                <option value="IL">Illinois</option>

            </optgroup>
        </select>
        <select class="custom-select w-sx inline v-middle" name="goodsLeftTime">
            <option value="0" selected disabled>到期时间</option>
            <option value="3">剩余3天内</option>
            <option value="7">剩余7天内</option>
            <option value="15">剩余15天内</option>
            <option value="30">剩余30天内</option>
        </select>
        <select class="custom-select w-sx inline v-middle" name="goodsStock">
            <option value="all" selected disabled>库存量</option>
            <option value="all" {% ifequal 'all' goodsStock %}selected{% endifequal %}>全部</option>
            <option value="0" {% ifequal '0' goodsStock %}selected{% endifequal %}>无货</option>
            <option value="10" {% ifequal '10' goodsStock %}selected{% endifequal %}>小于10</option>
            <option value="50" {% ifequal '50' goodsStock %}selected{% endifequal %}>小于50</option>
            <option value="100" {% ifequal '100' goodsStock %}selected{% endifequal %}>小于100</option>
        </select>

    </div>

        <div class="col-sm-6">
            <div class="input-group">

                <input type="hidden" id="searchType" name="searchType" value="1"/>
                <div class="input-group-btn dropdown"><button type="button" class="btn btn-sm white dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span id="searchTypeText">搜索类型</span> <span class="caret"></span></button><div class="dropdown-menu"><a class="dropdown-item setSearchType" href="javascript:" data-val="1">标题</a> <a class="dropdown-item setSearchType" href="javascript:" data-val="2">产品ID</a><div class="divider"></div><a class="dropdown-item setSearchType" href="javascript:" data-val="3">商品编码</a> </div></div>
                <input type="text" class="form-control" name="searchTxt" placeholder="搜索" style="height:1.7rem;font-size: 14px;" {% if searchTxt %}value="{{ searchTxt }}"{% endif %}>
                <span class="input-group-btn">
                <button class="btn btn-sm white" type="submit"><i class="fa fa-search"></i></button>
                <button class="btn btn-sm white" type="button" data-toggle="tooltip" data-placement="bottom" title="展开/折叠筛选项目" id="filterBtn"><a href="#" class="" data-ui-toggle-class=""><i class="fa fa-angle-double-up text-danger none"></i><i class="fa fa-angle-double-down inline"></i></a></button>
                </span>

            </div>
        </div>
    </form>
</div>


<div class="row p-a p-t-0">
    <div class="col-sm-12">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm white active">批量编辑</button>
                                <button type="button" class="btn btn-sm white">批量下架</button>
                                <button type="button" class="btn btn-sm white">批量删除</button>
                                <button type="button" class="btn btn-sm white">同步产品</button>
                                <button type="button" class="btn btn-sm white">导出产品</button>
                            </div>
                        </div>
</div>

<div class="table-responsive">

    <table class="table table-striped table-hover b-t">
        <thead>
        <tr>
            <th style="width:20px"><label class="ui-check m-a-0">
                <input type="checkbox" id="action-toggle">
                <i></i></label></th>
            <th>主图</th>
            <th>标题</th>
            <th>产品组</th>
            <th style="min-width:140px">售价(USD)</th>
            <th>库存</th>
            <th style="min-width: 120px;">运费模板</th>
            <th style="min-width: 160px;">剩余时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="goodsListBox">
        {% for product in productData %}
        <tr data-val="{{ product.productId }}" data-store="{{ product.storeId  }}">
            <td><label class="ui-check m-a-0">
                <input type="checkbox" name="post[]">
                <i class="dark-white"></i></label></td>
            <td><img src="{{ product.thumbnail }}" class="w-96 img-responsive" alt=""/></td>
            <td><p id="sub-{{ product.productId }}">{{ product.subject }}</p> <i class="fa fa-edit editSubject" data-toggle="modal" data-target="#modal-editSubject"></i></td>
            <td>{{ product.group }}</td>
            <td><span class="label info">零</span> {{ product.productPrice }} <i class="fa fa-edit editPrice" data-toggle="modal" data-target="#modal-editPrice"></i> {% ifnotequal product.bulkPrice 'None' %} <br><br><span class="label warning">批</span> {{ product.bulkPrice }} <i class="fa fa-edit editBulkPrice" data-toggle="modal" data-target="#modal-editBulkPrice" data-attr="{{ product.bulkOrder }}|{{ product.bulkDiscount }}"></i> {% endifnotequal %} </td>
            <td><span id="stock-{{ product.productId }}">{{ product.stock }}</span> <i class="fa fa-edit editStock" data-toggle="modal" data-target="#modal-editStock"></i></td>
            <td>{{ product.template }}</td>
            <td><!--{{ product.leftTime }}-->
                <code id="leftTime-{{ product.productId }}" >{{ product.leftTime }}</code>
            <script>addTimer("leftTime-{{ product.productId }}", '{{ product.offlineDate }}');</script>
            </td>
            <td class="text-right">
                <button class="btn btn-sm btn-icon white"><i class="fa fa-edit" data-toggle="tooltip" data-placement="bottom" title="编辑"></i></button>
                <button class="btn btn-sm btn-icon white setOffline" data-toggle="modal" data-target="#modal-setOffline"><i class="fa fa-sign-out" data-toggle="tooltip" data-placement="bottom" title="下架"></i></button>
                <button class="btn btn-sm btn-icon white"><i class="fa fa-refresh" data-toggle="tooltip" data-placement="bottom" title="同步"></i></button>
                <button class="btn btn-sm btn-icon white renewExpire"><i class="fa fa-send" data-toggle="tooltip" data-placement="bottom" title="延长有效期"></i></button>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>


<div id="modal-editSubject" class="modal black-overlay" data-backdrop="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑标题 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3">
                <form role="form" id="editSubjectForm" action="" method="post">
                    <input type="hidden" name="action" value="_editSubject"/>
                    {% csrf_token %}
                    <input type="hidden" id="editSubjectProductId" name="editSubjectProductId" value="0"/>
                    <input type="hidden" id="editSubjectStoreId" name="editSubjectStoreId" value="0"/>
                    <div class="" id="editSubjectItems">
                        <div class="form-group row">
                        <label for="editSubjectEn" class="col-sm-2 form-control-label">标题：</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" type="text" name="editSubjectEn" id="editSubjectEn" maxlength="218" rows="3">

                            </textarea>
                        </div>
                            <span class="showCount" style="display: none"><code id="countNum">0</code>/218</span>
                    </div>
                    </div>

                    <div class="form-group row m-t-md">
                        <div class="col-sm-offset-2 col-sm-12">
                            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                            <button type="button" id="editSubjectBtn" class="btn success p-x-md">提交</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<div id="modal-editPrice" class="modal black-overlay" data-backdrop="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑价格 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3">
                <form role="form" id="editPriceForm" action="" method="post">
                    <input type="hidden" name="action" value="_editPrice"/>
                    {% csrf_token %}
                    <input type="hidden" id="editPriceProductId" name="editPriceProductId" value="0"/>
                    <input type="hidden" id="editPriceStoreId" name="editPriceStoreId" value="0"/>
                    <div class="" id="editPriceItems">

                    </div>

                    <div class="form-group row m-t-md">
                        <div class="col-sm-offset-2 col-sm-12">
                            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn success p-x-md">提交</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>


<div id="modal-editBulkPrice" class="modal black-overlay" data-backdrop="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑批发折扣 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3">
                <form role="form" id="editStockForm" action="" method="post">
                    <input type="hidden" name="action" value="_editBulkPrice"/>
                    {% csrf_token %}
                    <input type="hidden" id="editBulkPriceProductId" name="editBulkPriceProductId" value="0"/>
                    <input type="hidden" id="editBulkPriceStoreId" name="editBulkPriceStoreId" value="0"/>


                    <div class="p-a row">
                        <div class="col-sm-12">
                            购买数量
                    <input maxlength="6" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " type="text" name="editBulkOrder" id="editBulkOrder" class="" style="width: 60px;">
                    及以上时，每件价格在零售价的基础上减免
                    <input maxlength="2" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " type="text" class="" name="editBulkDiscount" id="editBulkDiscount" style="width: 50px;">
                    %，即 <code id="editBulkDiscountRate">9.8</code> 折。
                        </div>
                    </div>


                    <div class="form-group row m-t-md">
                        <div class="col-sm-offset-2 col-sm-12">
                            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn success p-x-md">提交</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>


<div id="modal-editStock" class="modal black-overlay" data-backdrop="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑库存 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3">
                <form role="form" id="editStockForm" action="" method="post">
                    <input type="hidden" name="action" value="_editStock"/>
                    {% csrf_token %}
                    <input type="hidden" id="editStockProductId" name="editStockProductId" value="0"/>
                    <input type="hidden" id="editStockStoreId" name="editStockStoreId" value="0"/>
                    <div class="" id="editStockItems">

                    </div>

                    <div class="form-group row m-t-md">
                        <div class="col-sm-offset-2 col-sm-12">
                            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                            <button type="button" id="editStockBtn" class="btn success p-x-md">提交</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>


<div id="modal-setOffline" class="modal" data-backdrop="true">
    <div class="row-col h-v">
        <div class="row-cell v-m">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form role="form" action="" method="POST">
                        {% csrf_token %}
                    <input type="hidden" name="action" value="_offline"/>
                    <input type="hidden" name="offlineProductID" id="offlineProductID" value="0"/>
                    <div class="modal-header">
                        <h5 class="modal-title">提示</h5>
                    </div>
                    <div class="modal-body text-center p-lg">
                        <p>您确定要将产品<code id="offlineProductName" class=""></code>下架?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">否</button>
                        <button type="submit" class="btn danger p-x-md" >是</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<footer class="light lt p-a">
    <div class="row">
        <div class="col-sm-2 text-left"><small class="text-muted inline m-t-sm m-b-sm">第 1-30 /共 {{ totalCount }} 条</small></div>
        <div class="col-sm-10 text-right text-center-xs">
            <ul class="pagination m-a-0">
                <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                {% for pp in pageData %}
                    <li{% if pp.active %} class="active"{% endif %}><a href="?page={{ pp.page }}{% if status %}&status={{ status }}{% endif %}{% if searchType %}&searchType={{ searchType }}{% endif %}{% if searchTxt %}&searchTxt={{ searchTxt }}{% endif %}{% if goodsStock %}&goodsStock={{ goodsStock }}{% endif %}">{{ pp.page }}</a></li>
                {% endfor %}

                <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
            </ul>
        </div>

    </div>
</footer>
</div>
</div>



{% endblock %}
